<template>
  <div id="detail">
    <detaiil-tab-bar @turnFourClick="fourClick" ref="nav"></detaiil-tab-bar>
    <scroll class="scroll-detail" :pull-up-load="true" ref="scroll" @scrollEvent="scrollPosition">
    <ddetail-swiper :swiperImage="swiperImage" @imageLoaded="loaded" ></ddetail-swiper>
    <detail-goods-info :goods="goods"></detail-goods-info>
    <detail-shop :shop="shop"></detail-shop>
    <detail-goods-info-all :detail-info="detailInfo" @imageLoad="imageLoad"/>
    <detail-param-info :param-info="paramInfo" ref="parmas"></detail-param-info>
    <detail-comment-info :commentInfo="commentInfo" ref="comment"></detail-comment-info>
    <goods-list :goods="recommendInfo" ref="recommend"></goods-list>
    </scroll>
    <detail-bot-bar @addCart="addCart">></detail-bot-bar>
<!--    vue 自定义组件点击必须要.native-->
    <back-top @click.native="backTop" v-show="isShowBackTop"></back-top>
  </div>
</template>

<script>
  import DetaiilTabBar from "./childComps/DetaiilTabBar";
  import {getDetailData, Goods, Shop,GoodsParam,getRecommend} from "../../network/detail";
  import DdetailSwiper from "./childComps/DdetailSwiper";
  import DetailGoodsInfo from "./childComps/DetailGoodsInfo";
  import DetailShop from "./childComps/DetailShop";
  import Scroll from "../../components/common/scroll/Scroll";
  import DetailGoodsInfoAll from "./childComps/DetailGoodsInfoAll";
  import DetailParamInfo from "./childComps/DetailParamInfo";
  import DetailCommentInfo from "./childComps/DetailCommentInfo";
  import GoodsList from "../../components/content/goods/GoodsList";
  import {itemLoading, scrollTopMixin} from "../../common/mixin";
  import {dobounce} from "../../common/ytils";
  import DetailBotBar from "./childComps/DetailBotBar";
  import BackTop from "../../components/content/backTop/BackTop";

  export default {
    name: "detail",
    components: {
      BackTop,
      DetailBotBar,
      GoodsList,
      DetailCommentInfo,
      DetailParamInfo, Scroll, DetailShop, DetailGoodsInfo, DdetailSwiper, DetaiilTabBar,DetailGoodsInfoAll},
    data(){
      return {
        iid: null,
        swiperImage: [],
        goods: {},
        shop: {},
        detailInfo: {},
        paramInfo: {},
        commentInfo: [],
        recommendInfo: [],
        itemClick: [],
        getTopy: null,
        currentIndex: 0
      }
    },
    mixins: [itemLoading, scrollTopMixin],
    created() {
      this.iid = this.$route.params.id

      getDetailData(this.iid).then(res=> {
        this.swiperImage = res.result.itemInfo.topImages
        console.log(res);
        this.goods = new Goods(res.result.itemInfo,res.result.columns,res.result.shopInfo.services)

        //店铺信息

        this.shop = new Shop(res.result.shopInfo)
        // 4.保存商品的详情数据
        this.detailInfo = res.result.detailInfo;

        // 5.获取参数的信息
        this.paramInfo = new GoodsParam(res.result.itemParams.info, res.result.itemParams.rule)

        if(res.result.rate.cRate !== 0){
          this.commentInfo = res.result.rate.list
        }

      })

      getRecommend().then(res => {

        this.recommendInfo = res.data.list
      })

      this.getTopy = dobounce(()=>{
        this.itemClick= []
        this.itemClick.push(0)
        this.itemClick.push(this.$refs.parmas.$el.offsetTop)
        this.itemClick.push(this.$refs.comment.$el.offsetTop)
        this.itemClick.push(this.$refs.recommend.$el.offsetTop)
        this.itemClick.push(Number.MAX_VALUE);
      },100)
    },
    methods: {
      loaded(){
        this.$refs.scroll.scroll.refresh()
      },
      imageLoad(){
        this.newRefresh()

        this.getTopy()

      },
      fourClick(index){
        this.$refs.scroll.scroll.scrollTo(0,-this.itemClick[index],1000)
      },
      scrollPosition(position){
        this.isShowBackTop = (-position.y) > 800;
        const positionY = -(position.y);
        let _lenth = this.itemClick.length;
        for(let i=0; i<_lenth-1; i++){
          if(this.currentIndex !== i && (positionY >= this.itemClick[i] && positionY < this.itemClick[i+1])){
            this.currentIndex = i;
            this.$refs.nav.currentIndex = this.currentIndex;
          }
        }

      },
      addCart() {
        // 获取购物车需要展示的信息
        const product = {}
        product.image = this.swiperImage[0];
        product.title = this.goods.title;
        product.desc = this.goods.desc;
        product.price = this.goods.realPrice;
        product.iid = this.iid;
        product.checked = true

        //将商品添加到购物车里
        this.$store.dispatch('addCart', product).then(res=> {
          this.$toast.show(res,1000)
        },err=>{
          this.$toast.show(err,1000)
        });
      }

    },
    mounted() {
    },
    destroyed() {
      this.$bus.$off('imageItemLoad',this.itemLoad)
    }
  }
</script>

<style scoped>
  #detail{
    height: 100vh;
    position: relative;
    z-index: 1;
    background-color: #fff;
  }
  .scroll-detail{
    position: absolute;
    top: 44px;
    bottom:49px;
    left: 0;
    right: 0;
    overflow: hidden;
 }
</style>